/*
 * @Description: 
 * @Author: handongliang dongliang.han@12301.cn
 * @Date: 2023-11-03 09:49:57
 * @LastEditTime: 2023-11-03 10:15:24
 */
import './index.less';
interface SingleBarRatioProp {
    title: string
    value?: number | string
    percent: string | number
    unit?: string | undefined
    itemStyle?: any
    labelStyle?: any
    valueStyle?: any
}
const SingleBarRatio: React.FC<SingleBarRatioProp> = (props) => {
    const { title, value, percent, itemStyle, labelStyle, valueStyle, unit } = props
    return (
        <div className='single-bar-ratio'>
            <div className='single-bar-ratio-head' style={labelStyle}>
                <div className='single-bar-ratio--title'>{title}</div>
                <div className='single-bar-ratio--value'>
                    <span style={valueStyle}>{value}</span>
                    <span>{unit}</span>
                </div>
            </div>
            <div className='single-bar-ratio-item' style={itemStyle}>
                <div className='single-bar-ratio-progress' style={{ width: percent + '%' }}></div>
            </div>
        </div>
    )
}
export default SingleBarRatio